<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>千千万能工具箱-p2p文件传输房间</title>
		<link rel="stylesheet" href="../js/element2.4.7/index.css" />
		  <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="../js/vue2.6.11/vue.js"></script>
		<script src="../js/element2.4.7/index.js"></script>
		<script src="../js/jquery.min.js"></script>
		<style>
		
			  
		</style>
	</head>
	<body>
		<div id="app" style="margin: auto; width: 100%; text-align: center;">
		
			<div id="files-container">
				<h3 style="">房间传输码【{{roomId}}】传输文件列表进度:</h3>
				<el-progress type="circle" :percentage="percentage" :width="150"
				:stroke-width="15"
				></el-progress>
			</div>
		<br/>
	
		<div v-if="peerCount>0" style="color: red;">对方已准备就绪,等待文件传输</div>
<br/>
		<el-upload
		v-if="peerCount>0"
		  class="upload-demo"
		  action="/test"
		  drag
:auto-upload="false"
:disabled="disable"
		  
		  :on-change="onFileChange"
		  :limit="1">
		  <i class="el-icon-upload"></i>
		  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
	
		</el-upload>
	
	<div>
		<h3 style="">已传输文件列表</h3>
		
		  <el-table
		    :data="tableData"
		    border
		    style="width: 100%; margin: auto;">
		<!--    <el-table-column
		      fixed
		      prop="uuid"
		      label="文件uuid"
		      width="170">
		    </el-table-column> -->
		    <el-table-column
		      prop="name"
		      label="文件名"
		      width="150">
		    </el-table-column>
		    <el-table-column
		      prop="size"
		      label="文件大小"
		      width="100">
			      <template slot-scope="scope">
			       
			          {{ formatFileSize(scope.row.size) }}
			        </template>
		    </el-table-column>
		<!--    <el-table-column
		      prop="type"
		      label="文件类型"
		      width="250">
		    </el-table-column> -->
	 <!-- fixed="right" -->
		    <el-table-column
		     
		      label="操作"
		      width="110">
		      <template slot-scope="scope">
		        <el-button @click="handleClick(scope.row)" type="text" >下载文件</el-button>
		
		      </template>
		    </el-table-column>
		  </el-table>
	</div>
		</div>
		
		<script src="../js/webrtc/RTCMultiConnection.min.js"></script>
		
		<script src="../js/webrtc/socket.io.js"></script>
		
		<script src="../js/webrtc/FileBufferReader.js"></script>
	
		<script src="js/util.js"></script>
		<script>
			console.log(getLocationUri())
					const baseUrl = "https://api.lqcpws.cn"
			let app=new Vue({
				el:'#app',
				data:{
					name:'webrtc',
					key:getLocationUri(),
					roomId:undefined,
					peerCount:0,
					file:{},
					fileList:[],
					disable:false,
					percentage:0,
					dataPercentage:[],
					    tableData: []
				},
				mounted(){
		this.$notify({
			title: '操作提示',
			message: '1：用户正在传输文件时，传输会被禁用，等待接收<br/>' +
				'2：用户离开时所有传输中断<br/>' +
				'3：无用户等待无法传输<br/>' +
				'4：公网无法建立对等连接传输慢<br/>' +
				'5：公网传输慢请断开传输，以免服务器宕机！<br/>' ,
			dangerouslyUseHTMLString: true,
			duration: 10000,
			type: 'warning'
		});
					this.checkParams()
						this.pingUser()
				},
				methods:{
					pingUser(){
						setInterval(function(app){
						app.peerCount=connection.peers.getLength()	
					
						},5000,this)
					},
					 formatFileSize(size){
						if(size>0&&size<1024){
							return "约"+size+"B"
						}
						if(size>=1024&&size<1024*1024){
							return "约"+parseInt(size/1024)+"K"
						}
						if(size>=1024*1024&&size<1024*1024*1024){
							return "约"+parseInt(size/1024/1024)+"M"
						}
						if(size>=1024*1024*1024&&size<1024*1024*1024*1024){
							return "约"+parseInt(size/1024/1024/1024)+"G"
						}
						return "约"+size+"B"
					},
					handleClick(row){
						// window.open(row.url)
						// 创建一个 <a> 标签
						var a = document.createElement('a');
						a.href = row.url;
						a.download = row.name; // 设置下载文件的名称
						
						// 将 <a> 标签添加到文档中
						document.body.appendChild(a);
						
						// 触发点击事件，开始下载文件
						a.click();
						
						// 下载完成后移除 <a> 标签
						document.body.removeChild(a);
						
						// connection.openOrJoin(this.roomId);
					},
					checkParams(){
						this.roomId=getParam(this.key)
						if(this.roomId==undefined){
							alert('缺少核心参数，即将返回主页面')
							window.location.href='index.html'
						}
						
					},
					test(){
						console.log('load')
					},
					onFileChange(file,fileList){
						this.percentage=0
						this.file=file.raw
						
						fileList.pop()
							// console.log('file',file,fileList)
				
							sendFile(this.file)
							// sendMsg("你好")
					},
					upload(data){
						console.log(data)
					}
				}
			})
		</script>
			<script src="js/p2p.js"></script>
	</body>
</html>